<script >
 export default {
   name:'IndexLeft',
   data(){
     return{
       tableData:[],//数据展示
       menuList:[
         {
           id:'1',
           name:'抽卡分析',
           url:'/analysis',
           icon:''
         },
         {
           id:'2',
           name:'抽卡预测',
           url:'/predict',
           icon:''
         },
         {
           id:'3',
           name:'排行榜',
           url:'/pvp',
           icon:''
         },
         {
           id:'4',
           name:'历史卡池',
           url:'/history',
           icon:''
         },
         {
           id:'5',
           name:'队伍评分',
           url:'/team-rating',
           icon:''
         },
         {
           id:'6',
           name:'角色出装',
           url:'/character-outfit',
           icon:''
         }
       ],
       isCollapse: false,
       menuActive:false,
       iframUrl:'',
       goBackFlag:''
     }
   },
   methods:{
     //左侧窗口的折叠与展开：
     toggleCollapse(){
       this.isCollapse=!this.isCollapse
     },
     menuHandLer(item,goBackFLag){
       //切换目录的逻辑操作
       this.menuActive=true;
       this.iframUrl=item.url
       this.goBackFlag=goBackFLag;
       // console.log(this.iframUrl)
       this.$emit('framUrl',this.iframUrl)
     }
   }
 }
</script>

<template>

  <!-- 侧边栏菜单区域 -->
  <el-menu background-color="#333744" text-color="#fff"
           active-text-color="#409BFF" :unique-opened="true" :collapse="isCollapse"
           :collapse-transition="false" style="height: 5000px"
  >
    <el-menu-item>  <!-- 折叠条 -->
      <!--为div添加点击事件-->
<!--        <el-button  @click="toggleCollapse"  style="margin-top: 20px ; font-size: 24px ;font-family: 华文宋体,serif">-->
<!--          登录-->
<!--        </el-button>-->
    </el-menu-item>
    <el-menu-item v-for="item in menuList"
      :index=item.id :key="item.id" @click="menuHandLer(item,false)"
    >
<!-- 为左侧菜单添加点击事件-->
      <template #default>
        <el-icon>
          <el-icon >
            <svg style=" " t="1693746262020" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10073" width="200" height="200"><path d="M213.312 170.688H256v42.688h-42.688zM256 170.688h42.688v42.688H256zM298.688 170.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10074"></path><path d="M341.312 170.688H384v42.688h-42.688z" fill="#F2A0BA" p-id="10075"></path><path d="M384 170.688h42.688v42.688H384z" fill="#EE86A6" p-id="10076"></path><path d="M426.688 170.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10077"></path><path d="M469.312 170.688H512v42.688h-42.688zM213.312 213.312H256V256h-42.688zM256 213.312h42.688V256H256zM298.688 213.312h42.688V256h-42.688z" fill="#F2A0BA" p-id="10078"></path><path d="M341.312 213.312H384V256h-42.688zM384 213.312h42.688V256H384z" fill="#F2A0BA" p-id="10079"></path><path d="M426.688 213.312h42.688V256h-42.688z" fill="#EE86A6" p-id="10080"></path><path d="M469.312 213.312H512V256h-42.688z" fill="#EE86A6" p-id="10081"></path><path d="M213.312 256H256v42.688h-42.688zM256 256h42.688v42.688H256zM298.688 256h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10082"></path><path d="M341.312 256H384v42.688h-42.688zM384 256h42.688v42.688H384zM426.688 256h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10083"></path><path d="M469.312 256H512v42.688h-42.688z" fill="#F2A0BA" p-id="10084"></path><path d="M213.312 298.688H256v42.688h-42.688z" fill="#EE86A6" p-id="10085"></path><path d="M256 298.688h42.688v42.688H256zM298.688 298.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10086"></path><path d="M341.312 298.688H384v42.688h-42.688zM384 298.688h42.688v42.688H384zM426.688 298.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10087"></path><path d="M469.312 298.688H512v42.688h-42.688zM512 170.688h42.688v42.688H512z" fill="#F2A0BA" p-id="10088"></path><path d="M512 213.312h42.688V256H512z" fill="#EE86A6" p-id="10089"></path><path d="M512 256h42.688v42.688H512zM512 298.688h42.688v42.688H512z" fill="#F2A0BA" p-id="10090"></path><path d="M554.688 170.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10091"></path><path d="M554.688 213.312h42.688V256h-42.688zM554.688 256h42.688v42.688h-42.688zM554.688 298.688h42.688v42.688h-42.688zM597.312 170.688H640v42.624h-42.688z" fill="#F2A0BA" p-id="10092"></path><path d="M597.312 213.312H640V256h-42.688zM597.312 256H640v42.688h-42.688zM597.312 298.688H640v42.688h-42.688zM640 213.312h42.688V256H640zM640 256h42.688v42.688H640zM682.688 213.312h42.624V256h-42.624zM640 170.688h42.688v42.624H640zM682.688 170.688h42.688v42.624h-42.688z" fill="#F2A0BA" p-id="10093"></path><path d="M725.312 170.688H768v42.624h-42.688zM426.688 42.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10094"></path><path d="M469.312 42.688H512v42.688h-42.688zM384 85.312h42.688V128H384z" fill="#F2A0BA" p-id="10095"></path><path d="M426.688 85.312h42.688V128h-42.688z" fill="#F2A0BA" p-id="10096"></path><path d="M469.312 85.312H512V128h-42.688zM512 42.688h42.688v42.688H512z" fill="#F2A0BA" p-id="10097"></path><path d="M512 85.312h42.688V128H512z" fill="#F2A0BA" p-id="10098"></path><path d="M554.688 42.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10099"></path><path d="M554.688 85.312h42.688V128h-42.688z" fill="#F2A0BA" p-id="10100"></path><path d="M597.312 85.312H640V128h-42.688z" fill="#EE86A6" p-id="10101"></path><path d="M682.688 298.688h42.688v42.688h-42.688zM725.312 256H768v42.688h-42.688z" fill="#F2A0BA" p-id="10102"></path><path d="M725.312 298.688H768v42.688h-42.688zM768 213.312h42.688V256H768zM768 256h42.688v42.688H768z" fill="#F2A0BA" p-id="10103"></path><path d="M768 298.688h42.688v42.688H768z" fill="#EE86A6" p-id="10104"></path><path d="M682.688 384h42.688v42.688h-42.688zM682.688 426.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10105"></path><path d="M682.688 469.312h42.688V512h-42.688zM725.312 384H768v42.688h-42.688z" fill="#EE86A6" p-id="10106"></path><path d="M725.312 426.688H768v42.688h-42.688z" fill="#EE86A6" p-id="10107"></path><path d="M725.312 469.312H768V512h-42.688zM682.688 512h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10108"></path><path d="M725.312 512H768v42.688h-42.688zM768 384h42.688v42.688H768zM768 426.688h42.688v42.688H768z" fill="#F2A0BA" p-id="10109"></path><path d="M768 469.312h42.688V512H768z" fill="#F2A0BA" p-id="10110"></path><path d="M768 512h42.688v42.688H768z" fill="#EE86A6" p-id="10111"></path><path d="M682.688 554.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10112"></path><path d="M682.688 597.312h42.688V640h-42.688z" fill="#EE86A6" p-id="10113"></path><path d="M725.312 554.688H768v42.688h-42.688z" fill="#EE86A6" p-id="10114"></path><path d="M725.312 597.312H768V640h-42.688zM682.688 640h42.688v42.688h-42.688zM768 554.688h42.688v42.688H768zM682.688 682.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10115"></path><path d="M810.688 384h42.688v42.688h-42.688zM810.688 426.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10116"></path><path d="M810.688 469.312h42.688V512h-42.688zM810.688 512h42.688v42.688h-42.688zM853.312 384H896v42.688h-42.688z" fill="#EE86A6" p-id="10117"></path><path d="M853.312 426.688H896v42.688h-42.688z" fill="#EE86A6" p-id="10118"></path><path d="M853.312 469.312H896V512h-42.688zM128 384h42.688v42.688H128z" fill="#EE86A6" p-id="10119"></path><path d="M170.688 384h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10120"></path><path d="M213.312 384H256v42.688h-42.688z" fill="#F2A0BA" p-id="10121"></path><path d="M256 384h42.688v42.688H256z" fill="#EE86A6" p-id="10122"></path><path d="M298.688 384h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10123"></path><path d="M341.312 384H384v42.688h-42.688zM384 384h42.688v42.688H384zM426.688 384h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10124"></path><path d="M469.312 384H512v42.688h-42.688zM128 426.688h42.688v42.688H128z" fill="#EE86A6" p-id="10125"></path><path d="M170.688 426.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10126"></path><path d="M213.312 426.688H256v42.688h-42.688zM256 426.688h42.688v42.688H256z" fill="#F2A0BA" p-id="10127"></path><path d="M298.688 426.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10128"></path><path d="M341.312 426.688H384v42.688h-42.688zM384 426.688h42.688v42.688H384zM426.688 426.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10129"></path><path d="M469.312 426.688H512v42.688h-42.688zM213.312 469.312H256V512h-42.688zM298.688 469.312h42.688V512h-42.688zM384 469.312h42.688V512H384z" fill="#F2A0BA" p-id="10130"></path><path d="M426.688 469.312h42.688V512h-42.688zM512 384h42.688v42.688H512zM512 426.688h42.688v42.688H512z" fill="#F2A0BA" p-id="10131"></path><path d="M512 469.312h42.688V512H512z" fill="#F2A0BA" p-id="10132"></path><path d="M213.312 512H256v42.688h-42.688z" fill="#EE86A6" p-id="10133"></path><path d="M298.688 512h42.688v42.688h-42.688zM384 512h42.688v42.688H384zM426.688 512h42.688v42.688h-42.688zM554.688 384h42.688v42.688h-42.688zM554.688 426.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10134"></path><path d="M597.312 384H640v42.688h-42.688zM597.312 426.688H640v42.688h-42.688z" fill="#F2A0BA" p-id="10135"></path><path d="M597.312 469.312H640V512h-42.688zM554.688 512h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10136"></path><path d="M597.312 512H640v42.688h-42.688zM213.312 554.688H256v42.688h-42.688z" fill="#EE86A6" p-id="10137"></path><path d="M298.688 554.688h42.688v42.688h-42.688zM384 554.688h42.688v42.688H384zM426.688 554.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10138"></path><path d="M298.688 597.312h42.688V640h-42.688z" fill="#EE86A6" p-id="10139"></path><path d="M426.688 597.312h42.688V640h-42.688zM512 554.688h42.688v42.688H512z" fill="#F2A0BA" p-id="10140"></path><path d="M512 597.312h42.688V640H512z" fill="#F2A0BA" p-id="10141"></path><path d="M298.688 640h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10142"></path><path d="M341.312 640H384v42.688h-42.688z" fill="#EE86A6" p-id="10143"></path><path d="M384 640h42.688v42.688H384zM426.688 640h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10144"></path><path d="M469.312 640H512v42.688h-42.688zM512 640h42.688v42.688H512zM597.312 554.688H640v42.688h-42.688z" fill="#F2A0BA" p-id="10145"></path><path d="M597.312 597.312H640V640h-42.688zM554.688 640h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10146"></path><path d="M597.312 640H640v42.688h-42.688z" fill="#F2A0BA" p-id="10147"></path><path d="M298.688 682.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10148"></path><path d="M341.312 682.688H384v42.688h-42.688zM384 682.688h42.688v42.688H384zM426.688 682.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10149"></path><path d="M469.312 682.688H512v42.688h-42.688zM512 682.688h42.688v42.688H512zM554.688 682.688h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10150"></path><path d="M597.312 682.688H640v42.688h-42.688z" fill="#EE86A6" p-id="10151"></path><path d="M469.312 725.312H512V768h-42.688zM512 725.312h42.688V768H512z" p-id="10152"></path><path d="M256 128h42.688v42.688H256zM298.688 128h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10153"></path><path d="M341.312 128H384v42.688h-42.688z" fill="#EE86A6" p-id="10154"></path><path d="M384 128h42.688v42.688H384zM426.688 128h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10155"></path><path d="M469.312 128H512v42.688h-42.688zM170.688 341.312h42.688V384h-42.688z" fill="#F2A0BA" p-id="10156"></path><path d="M213.312 341.312H256V384h-42.688z" fill="#EE86A6" p-id="10157"></path><path d="M256 341.312h42.688V384H256zM298.688 341.312h42.688V384h-42.688z" fill="#F2A0BA" p-id="10158"></path><path d="M341.312 341.312H384V384h-42.688zM384 341.312h42.688V384H384zM426.688 341.312h42.688V384h-42.688z" fill="#F2A0BA" p-id="10159"></path><path d="M469.312 341.312H512V384h-42.688zM512 128h42.688v42.688H512zM512 341.312h42.688V384H512zM554.688 128h42.688v42.688h-42.688zM554.688 341.312h42.688V384h-42.688z" fill="#F2A0BA" p-id="10160"></path><path d="M597.312 128H640v42.688h-42.688zM597.312 341.312H640V384h-42.688zM640 128h42.688v42.688H640zM640 298.688h42.688v42.688H640z" fill="#F2A0BA" p-id="10161"></path><path d="M640 341.312h42.688V384H640zM640 384h42.688v42.688H640zM640 426.688h42.688v42.688H640z" fill="#F2A0BA" p-id="10162"></path><path d="M640 469.312h42.688V512H640z" fill="#F2A0BA" p-id="10163"></path><path d="M640 512h42.688v42.688H640z" fill="#EE86A6" p-id="10164"></path><path d="M640 554.688h42.688v42.688H640z" fill="#F2A0BA" p-id="10165"></path><path d="M640 597.312h42.688V640H640z" fill="#F2A0BA" p-id="10166"></path><path d="M640 640h42.688v42.688H640z" fill="#EE86A6" p-id="10167"></path><path d="M682.688 128h42.688v42.688h-42.688zM682.688 256h42.688v42.688h-42.688zM682.688 341.312h42.688V384h-42.688z" fill="#F2A0BA" p-id="10168"></path><path d="M725.312 128H768v42.688h-42.688z" fill="#EE86A6" p-id="10169"></path><path d="M725.312 213.312H768V256h-42.688zM725.312 341.312H768V384h-42.688z" fill="#F2A0BA" p-id="10170"></path><path d="M768 170.688h42.688v42.688H768zM768 341.312h42.688V384H768zM640 682.688h42.688v42.688H640z" fill="#EE86A6" p-id="10171"></path><path d="M810.688 341.312h42.688V384h-42.688z" fill="#F2A0BA" p-id="10172"></path><path d="M128 469.312h42.688V512H128zM170.688 469.312h42.688V512h-42.688z" fill="#EE86A6" p-id="10173"></path><path d="M256 469.312h42.688V512H256zM341.312 469.312H384V512h-42.688zM469.312 469.312H512V512h-42.688z" fill="#F2A0BA" p-id="10174"></path><path d="M170.688 512h42.688v42.688h-42.688z" fill="#EE86A6" p-id="10175"></path><path d="M256 512h42.688v42.688H256zM341.312 512H384v42.688h-42.688zM469.312 512H512v42.688h-42.688zM512 512h42.688v42.688H512z" fill="#F2A0BA" p-id="10176"></path><path d="M554.688 469.312h42.688V512h-42.688zM256 554.688h42.688v42.688H256z" fill="#EE86A6" p-id="10177"></path><path d="M341.312 554.688H384v42.688h-42.688zM469.312 554.688H512v42.688h-42.688z" fill="#F2A0BA" p-id="10178"></path><path d="M256 597.312h42.688V640H256z" fill="#EE86A6" p-id="10179"></path><path d="M341.312 597.312H384V640h-42.688zM384 597.312h42.688V640H384zM469.312 597.312H512V640h-42.688zM554.688 554.688h42.688v42.688h-42.688z" fill="#F2A0BA" p-id="10180"></path><path d="M554.688 597.312h42.688V640h-42.688z" fill="#F2A0BA" p-id="10181"></path><path d="M170.688 170.688h42.688v42.688h-42.688z" p-id="10182"></path><path d="M170.688 213.312h42.688V256h-42.688zM170.688 256h42.688v42.688h-42.688zM170.688 298.688h42.688v42.688h-42.688zM384 42.688h42.688v42.688H384zM256 85.312h42.688V128H256zM298.688 85.312h42.688V128h-42.688z" p-id="10183"></path><path d="M341.312 85.312H384V128h-42.688zM597.312 42.688H640v42.688h-42.688zM640 85.312h42.688V128H640zM682.688 85.312h42.688V128h-42.688z" p-id="10184"></path><path d="M725.312 85.312H768V128h-42.688zM810.688 170.688h42.688v42.688h-42.688z" p-id="10185"></path><path d="M810.688 213.312h42.688V256h-42.688zM810.688 256h42.688v42.688h-42.688zM810.688 298.688h42.688v42.688h-42.688zM725.312 640H768v42.688h-42.688zM768 597.312h42.688V640H768zM725.312 682.688H768v42.688h-42.688z" p-id="10186"></path><path d="M682.688 725.312h42.688V768h-42.688zM810.688 554.688h42.688v42.688h-42.688zM896 384h42.688v42.688H896zM896 426.688h42.688v42.688H896z" p-id="10187"></path><path d="M896 469.312h42.688V512H896zM853.312 512H896v42.688h-42.688zM85.312 384H128v42.688h-42.688zM85.312 426.688H128v42.688h-42.688zM213.312 597.312H256V640h-42.688zM256 640h42.688v42.688H256zM256 682.688h42.688v42.688H256zM341.312 725.312H384V768h-42.688zM384 725.312h42.688V768H384zM426.688 725.312h42.688V768h-42.688zM469.312 768H512v42.688h-42.688zM554.688 725.312h42.688V768h-42.688zM469.312 810.688H512v42.688h-42.688zM469.312 896H512v42.688h-42.688zM469.312 938.688H512v42.688h-42.688z" p-id="10188"></path><path d="M597.312 725.312H640V768h-42.688zM469.312 853.312H512V896h-42.688zM426.688 0h42.688v42.688h-42.688z" p-id="10189"></path><path d="M469.312 0H512v42.688h-42.688zM213.312 128H256v42.688h-42.688zM128 341.312h42.688V384H128zM512 0h42.688v42.688H512zM554.688 0h42.688v42.688h-42.688zM768 128h42.688v42.688H768zM640 725.312h42.688V768H640zM853.312 341.312H896V384h-42.688zM469.312 981.312H512V1024h-42.688zM85.312 469.312H128V512h-42.688zM128 512h42.688v42.688H128zM170.688 554.688h42.688v42.688h-42.688zM298.688 725.312h42.688V768h-42.688z" p-id="10190"></path></svg>
          </el-icon>
        </el-icon>
        <span :href="item" style="margin-top: 0 ;  ;font-family: 华文宋体,serif">
        <!--为每一个菜单添加路由控制右侧页面的走向-->
          {{item.name}}
        </span>
      </template>
    </el-menu-item>
  </el-menu>
</template>

<style scoped>

</style>
